<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>添加员工</title>
	<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
	<link rel="stylesheet" href="css/homePage.css">
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/flexible.css">
	<link rel="stylesheet" href="css/vant.css">
    <script src="js/fontsize.js"></script>
    <script src="js/vue/vue.js"></script>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/fontsize.js"></script>
    <script src="js/vue/axios.js"></script>
    <script src="js/vue/MD5.js"></script>
    <script src="js/vue/vant.js"></script>
	<script src="js/flexible.js"></script>
	<script src="js/vue/qs.js"></script>
	<script src="js/glabe.js"></script>
	<style>
		.customer_type{
			font-size: 0.4rem;
		}
	</style>
</head>
<body>
	<div class="customer_type" id="app">
		<form action="" method="">
			<div style="position: relative;" class="upload_img">
				<img :src="Picurl ? Picurl : 'images/moren.png'">
				<input type="file" class="upload " onchange="uploadImg(this)">
			</div>
			<table class="customer_type_table">
				<tbody>
		
					<tr class="clearfix">
						<td><span>员工姓名</span></td>
						<td>
							<input type="text" name="" placeholder="请输入员工姓名" class="customername" v-model="name">
						</td>
					</tr>
					<tr class="clearfix">
						<td><span>员工性别</span></td>
						<td class="radio_male_td">
							<label>
								<input type=radio name=x1 value="1" :checked="Sex == 1 ? 'checked' : '' " @click="getRadioVal"><span>男</span>
							</label>
							<label class="margin_left">
								<input type=radio name=x1 value="0" :checked="Sex == 0 ? 'checked' : '' "  @click="getRadioVal"><span>女</span>
							</label>
						</td>
					</tr>
					<tr class="clearfix">
							<td><span>员工电话</span></td>
							<td>
								<input type="text" oninput = "value=value.replace(/[^\d]/g,'')" name="" placeholder="请输入员工电话" class="customerphone" v-model="phone">
							</td>
						</tr>
					<tr class="clearfix">
						<td><span>员工角色</span></td>
						<td @click="roleShow = true">
							<span>{{role ? role.Rname : '请选择员工角色'}}</span>
							<img src="images/arrow.png" alt="">
						</td>

						<van-popup 
						v-model="roleShow"
						position="bottom"
						>
							<van-picker show-toolbar :columns="roleData" value-key="Rname" @confirm="roleSelect" @cancel="roleNo"/>
						</van-popup>
					</tr>
				</tbody>
			</table>
		</form>
		<div class="sub_btn_div">
			<input type="submit" name="" value="" class="sub_btn" readonly="readonly" @click="submitData()">
		</div>
	</div>
</body>
<script>
let type = getUrlQueryString('type');
if(type == 1){
	//添加
	$('title').text('添加员工');
}else{
	$('title').text('修改员工');
}

function uploadImg(obj) {
	var input = document.getElementsByClassName("upload");
	// 当用户上传时触发事件
	readFile(obj);
}
//处理图片并添加都dom中的函数
var base64 = ""
var readFile = function (obj) {
	// console.log(obj)
	// 获取input里面的文件组
	// console.log(obj.files);
	var fileList = obj.files;
	//对文件组进行遍历，可以到控制台打印出fileList去看看
	for (var i = 0; i < fileList.length; i++) {
		var reader = new FileReader();
		reader.readAsDataURL(fileList[i]);
		// 当文件读取成功时执行的函数
		reader.onload = function (e) {
			$(".upload_img img").attr("src", this.result)
			base64 = this.result
		}
	}
}
</script>
<script>
var app = new Vue({
	el: '#app',
	data: {
		//角色弹出层
		roleShow:false,
		//角色数据
		roleData:null,
		//员工姓名
		name:null,
		//性别
		Sex:1,
		//员工电话
		phone:null,
		//角色选中数据
		role:null,
		//会员头像
		Picurl:null,
		//员工id
		id:null
	},
	created() {
		//获取路由参数
		let id = getUrlQueryString('id')
		console.log(id)
		this.id = id;
		//判断id是否存在
		console.log(this.id)
		if(id){
			//是修改,获取会员信息
			axios.get('/mobileapi/boss/staff.php?act=staff_edit&id='+id).then(res=>{
				if(res.data.code == 200){
					this.name = res.data.data.info.Sname;
					this.Sex = res.data.data.info.Sex;
					this.phone = res.data.data.info.Phone;
					this.roleData = res.data.data.role_list;
					res.data.data.role_list.forEach(item => {
						if(item.id == res.data.data.info.Role){
							this.role = item
						}
					});
					this.Picurl = res.data.data.info.Picurl;
				}else{
					vant.Toast(res.data.msg);
				}
			}).catch(err=>{
				vant.Toast('请求发送失败，请重试');
			});
		}else{
			//是添加
			//获取会员列表
			axios.get('mobileapi/boss/staff.php?act=staff_add').then(res=>{
				if(res.data.code == 200){
					//获取成功
					this.roleData = res.data.data;
				}else{
					//获取失败
					vant.Toast('获取角色信息失败，请重试');
				}
			}).catch(err=>{
				vant.Toast('请求发送失败，请重试');
			});
		}
		
	},
	methods: {
		//选择性别
		getRadioVal(event){
			this.Sex = event.target.value;
		},
		//角色确认
		roleSelect(obj){
			this.role = obj;
			this.roleShow = false;
		},
		//角色取消
		roleNo(){
			this.roleShow = false;
		},
		//提交按钮
		submitData(){
			let Sname = this.name;			
			//验证数据
			if(Sname == null || Sname == ''){
				vant.Toast('请输入员工姓名');
				return false;
			}
			let Phone = this.phone;
			if(Phone == null || Phone == ''){
				vant.Toast('请输入员工电话');
				return false;
			}
			let Sex = this.Sex;
			if(Sex == null || Sex == ''){
				vant.Toast('请选择性别');
				return false;
			}
			if(this.role == null || this.role == ''){
				vant.Toast('请选择员工角色');
				return false;
			}
			let Role = this.role.id;
			//判断修改还是添加
			if(this.id){
				//发送数据
				let from = JSON.stringify({
					Sname,
					Phone,
					Sex,
					Role,
					id:this.id
				});
				let sign = md5(from);
				let params = {};
				//判断是否修改图片
				if (base64 == "" || base64 == null) {
					//未修改图片
					params = {
						from,
						sign,
						picdate:this.Picurl
					};
				}else{
					params = {
						from,
						sign,
						picdate:base64
					};
				}
				axios.post('mobileapi/boss/staff.php?act=staff_editgo',Qs.stringify(params)).then(res=>{
					if(res.data.code == 200){
						//添加成功
						vant.Toast('修改成功');
						setTimeout(()=>{
							// history.go(-1);
							// location.reload();
							location.href = "staff.html";
						},1000)
					}else{
						vant.Toast(res.data.msg);
					}
				}).catch(err=>{	
					vant.Toast('请求发送失败，请重试');
				})
			}else{
				//发送数据
				let from = JSON.stringify({
					Sname,
					Phone,
					Sex,
					Role
				});
				let sign = md5(from);
				let params = {
					from,
					sign,
					picdate:base64
				};
				axios.post('mobileapi/boss/staff.php?act=staff_addgo',Qs.stringify(params)).then(res=>{
					if(res.data.code == 200){
						//添加成功
						vant.Toast('添加成功');
						setTimeout(()=>{
							location.href = "staff.html";
						},1000)
					}else{
						vant.Toast(res.data.msg);
					}
				}).catch(err=>{	
					vant.Toast('请求发送失败，请重试');
				})
			}
			
		}
	},
})
</script>
</html>